<template>
  <div class="container">
    <div class="head">
      <div class="choice">
        <p class="select" :class="isLive?'isactive':''" @click="changeSelect(true)">直播</p>
        <p class="select" :class="isLive?'':'isactive'" @click="changeSelect(false)">视频库</p>
      </div>
      <div class="info">主播信息</div>
    </div>
    <div class="textinfo">
      <div class="number">
        <p>{{isLive?'直播次数':'视频数量'}}</p>
        <p>235支</p>
      </div>
      <div class="size">
        <p>{{isLive?'直播时长':'文件大小'}}</p>
        <p>2023M</p>
      </div>
    </div>

    <scroll-view scroll-y class="listbox">
      <div class="listitem" v-for="item in videoList" :key="item.id">
        <div class="left">
          <img :src="item.img" alt="">
        </div>
        <div class="right">
          <p class="title">{{item.title}}</p>
          <p class="content">{{item.content}}</p>
          <p class="stutas" :style="{color:item.stutas=='1'?'#199515':'#feb22e'}">{{item.stutas=='1'?'直播中':'预告'}}</p>
        </div>
        <img class="more" src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill">
      </div>
    </scroll-view >

    <button class="btn" @click="Releasevideo">{{isLive?'开直播':'发短视频'}}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLive: false, // 是否是直播
      videoList: [
        {
          id: 1,
          img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3021078330,3633431892&fm=26&gp=0.jpg',
          title: '美妆分类',
          content: '200支视频',
          stutas: 1
        },
        {
          id: 2,
          img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3021078330,3633431892&fm=26&gp=0.jpg',
          title: '美食分类',
          content: '20支视频',
          stutas: 2
        }
      ],
      isArrears: true// 是否欠费
    }
  },
  onShow () {
    if (this.isArrears) {
      let msg = '您的视频直播权限结束于 2020-5-18 20:00:00'
      this.$dialog(msg, '续费提示', '#5d93fd', '#000000', '取消', '立即续费').then(() => {
        // 续费
      }).catch(() => {
        this.$router.go(-1)
      })
    }
  },
  methods: {
    changeSelect (isLive) {
      this.isLive = isLive
      console.log(this.isLive)
    },
    Releasevideo () {
      this.$router.push(
        '/pages/live/releasevideo/main?isLive=' + this.isLive
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  background: #F2F3F7;
}
.head{
  position: relative;
  .info{
    position: absolute;
    right:10px;
    top: 9px;
  }
  .choice{
    display: flex;
    width: 150px;
    margin: 0 auto;
    background: #DAE3FE;
    border-radius: 17px;
    .select{
      width: 75px;
      height: 35px;
      line-height: 35px;
      color: #ffffff;
      border-radius: 17px;
      text-align: center;
      &.isactive{
        background: #4673f7;
      }
    }
  }
}
.textinfo{
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  .number,.size{
    color: #999999;
    text-align: center;
    p{
      &:last-child{
        font-weight: bold;
        color: #222222;
      }
    }
   
  }
}
.listbox{
  height: calc(74%);
  .listitem{
    padding: 15px;
    display: flex;
    align-items: center;
    background: #ffffff;
    margin-top: 5px;
    position: relative;
    .left{
      img{
        width: 80px;
        height: 70px;
      }
    }
    .right{
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p{
        margin: 3px 0;
      }
      .title{
        color: #222222;
      }
      .content{
        color: #999999;
        font-size: 12px;
      }
      .stutas{
        font-size: 12px;
      }
    }
    .more{
      width: 5px;
      height: 10px;
      position: absolute;
      right: 22px;
    }
  }
}
.btn{
  width: 345px;
  height: 50px;
  background: #4673f7;
  border-radius: 5px;
  text-align: center;
  color: #ffffff;
  position: absolute;
  bottom: 15px;
  left: 15px;
}
</style>